@charset "utf-8";
$fontsize:40;
@function r($px){
@return $px/$fontsize*1rem;
}
html{font-size: $fontsize;}
header{
  width: 100%;
  height: r(150);
  position: absolute;
  top: 0; 

  .back{
      border:1px solid #FF9344;
      border-radius: 25px;
      width: r(123);
      height: r(57);
      text-align: center;
      font-size: r(26);
      margin-top: r(48);
      margin-left: r(20);
      line-height: r(57);
  }
  div.email{ margin-right: r(22);
          margin-top: r(54);
          
        i{display:block;width: r(61);height: r(41);
            img{width: 100%;height: 100%;}
         }
        }
    a{display: block;width: r(27);height: r(27);border-radius: 50%;
         background: #fa5050;position: absolute;font-size: r(20);
         color: #FFFFFF;line-height: r(27);text-align: center;
         right: r(20);top:r(45)}
   .tittle{font-size: r(26);
        margin: 0 auto;
        text-align: center;
        font-weight: bold;
        margin-top: r(65);}
  }
section{width: 100%;position: absolute;
        top:r(150);bottom: r(136);overflow-y: scroll;
       .user-photo{
           width: 95%;height: r(169);
           margin: 0 auto;
           .user-photo-head{
               width: r(169);height: 100%;
               img{width: 100%; height: 100%;}
           }
       } 
        .user-photo-r{
            font-size: r(45);
            font-weight: blod;
            margin-top: r(46);
            
        }
        .user-photo-check{
            height: 100%;
            margin-left: r(20);
            line-height: r(38);
            overflow: hidden;
           
            a{display: block;padding-top: r(32);
               font-size: r(30); margin-left: r(20);
               color: #000000; font-weight: blod;}
            span{display: block;padding-top: r(32);
                  font-size: r(24);color: #b2b2b2; margin-left: r(20);}
        
        }
        .user-ul{width: 95%;margin: 0 auto;font-size: 0;margin-top: r(28);
            ul li{display: inline-block; width: 33.3%;text-align: center;
                   position: relative;
                  a{display: block; width: r(193); height: r(149);padding-top: r(20);
                    img{height: r(81);}}}
               
                li:first-child a{background: #b2e0a0;}
                li:nth-child(2) a{background: #a0dce0;margin:0 auto;}
                li:last-child a{background: #e0b7a0;margin-left:r(45) ; }
                span{display: block;position: absolute;
                    bottom: r(12);
                    width: 100%;height: r(25);font-size: r(25);line-height: r(25);}
                li:last-child span{text-indent: r(48);}
                li:first-child span{text-align: left;text-indent: r(45);}
                
            }
      .classify-tittle {
                width: 100%;
                height: r(74);
                margin-top: r(29);
        .classify {
            width: 40%;
            height: 100%;
            margin-left: r(20);
            .classify-pic {
                width: r(54);
                height: r(70);
                display: inline-block;
                img {
                    width: 100%;
                    height: 100%;
                    vertical-align: middle;
                }
            }
            h3 {
                display: inline-block;
                font-size: r(30);
                font-weight: blod;
                text-indent: r(40);
            }
        }
        .more {
            width: 40%;
            height: 100%;
            margin-right: r(22);
            text-align: right;
            h3 {
                font-weight: 500;
                color: #000000;
                font-size: r(24);
                display: inline-flex;
            }
            span {
                font-size: r(24);
                color: #FF9344;
            }
        }
    }
    
    .classify1-tittle {
                width: 100%;
                height: r(74);
                margin-top: r(29);
        .classify1 {
            width: 40%;
            height: 100%;
            margin-left: r(20);
            .classify1-pic {
                width: r(70);
                height: r(73);
                display: inline-block;
                img {
                    width: 100%;
                    height: 100%;
                    vertical-align: middle;
                }
            }
            h3 {
                display: inline-block;
                font-size: r(30);
                font-weight: blod;
                text-indent: r(27);
            }
        }
        .more {
            width: 40%;
            height: 100%;
            margin-right: r(22);
            text-align: right;
            h3 {
                font-weight: 500;
                color: #000000;
                font-size: r(24);
                display: inline-flex;
            }
            span {
                font-size: r(24);
                color: #FF9344;
            }
        }
    }
    
     .user-tittle {
                width: 100%;
                height: r(74);
                margin-top: r(29);
        .user {
            width: 40%;
            height: 100%;
            margin-left: r(20);
            .user-pic {
                width: r(92);
                height: r(57);
                display: inline-block;
                img {
                    width: 100%;
                    height: 100%;
                    vertical-align: middle;
                }
            }
            h3 {
                display: inline-block;
                font-size: r(30);
                font-weight: blod;
                text-indent: r(6);
            }
        }
        .more {
            width: 40%;
            height: 100%;
            margin-right: r(22);
            text-align: right;
            h3 {
                font-weight: 500;
                color: #000000;
                font-size: r(24);
                display: inline-flex;
            }
            span {
                font-size: r(24);
                color: #FF9344;
            }
        }
    }
    
    .user1-tittle {
                width: 100%;
                height: r(74);
                margin-top: r(29);
        .user1 {
            width: 40%;
            height: 100%;
            margin-left: r(20);
            .user1-pic {
                width: r(60);
                height: r(60);
                display: inline-block;
                img {
                    width: 100%;
                    height: 100%;
                    vertical-align: middle;
                }
            }
            h3 {
                display: inline-block;
                font-size: r(30);
                font-weight: blod;
                text-indent: r(35);
                
            }
        }
        .more {
            width: 40%;
            height: 100%;
            margin-right: r(22);
            text-align: right;
            h3 {
                font-weight: 500;
                color: #000000;
                font-size: r(24);
                display: inline-flex;
            }
            span {
                font-size: r(24);
                color: #FF9344;
            }
        }
    }
    
    .user2-tittle {
                width: 100%;
                height: r(77);
                margin-top: r(96);
        .user2 {
            width: 40%;
            height: 100%;
            margin-left: r(20);
            .user2-pic {
                width: r(77);
//              height: r(77);
                display: inline-block;
                img {
                    width: 100%;
                    height: 100%;
                    vertical-align: middle;
                }
            }
            h3 {
                display: inline-block;
                font-size: r(30);
                font-weight: blod;
                text-indent: r(20);
                
            }
        }
        .more {
            width: 40%;
            height: 100%;
            margin-right: r(22);
            text-align: right;
            h3 {
                font-weight: 500;
                color: #000000;
                font-size: r(24);
                display: inline-flex;
            }
            span {
                font-size: r(24);
                color: #FF9344;
            }
        }
    }
     .user3-tittle {
                width: 100%;
                height: r(77);
                margin-top: r(29);
        .user3 {
            width: 40%;
            height: 100%;
            margin-left: r(20);
            .user3-pic {
                width: r(77);
//              height: r(77);
                display: inline-block;
                img {
                    width: 100%;
                    height: 100%;
                    vertical-align: middle;
                }
            }
            h3 {
                display: inline-block;
                font-size: r(30);
                font-weight: blod;
                text-indent: r(20);
                
            }
        }
        .more {
            width: 40%;
            height: 100%;
            margin-right: r(22);
            text-align: right;
            h3 {
                font-weight: 500;
                color: #000000;
                font-size: r(24);
                display: inline-flex;
            }
            span {
                font-size: r(24);
                color: #FF9344;
            }
        }
    }
    .buttom{
        width: 65%;margin:  0 auto;height: r(75);
        margin-top: r(36);
    }
    .relax,.out{width: r(148);height: r(75);text-align: center;
          border-radius: 25px;background: #FF9344;line-height: r(75); 
            a{display: block; width: r(148);height: r(75);color: #ffffff;} }   
        }